<template>
    <div class="addmenus">
        <div class="conent">
            <el-form label-width="120px">
                <el-form-item label="菜单名称" required>
                    <el-input type="text" placeholder="请输入账号" v-model="addMenus.title">权限 </el-input>
                </el-form-item>
                <el-form-item label="上级菜单">
                    <el-cascader :options="addoptions" v-model="addMenus.level" />
                </el-form-item>
                <el-form-item label="前端名称" required>
                    <el-input type="text" v-model="addMenus.name" placeholder="请输入账号"
                        :disabled="addMenus.name ? true : false">
                    </el-input>

                </el-form-item>
                <el-form-item label="前端图表">
                    <el-input v-model="addMenus.icon" type="text" placeholder="请输入账号"
                        :disabled="addMenus.name ? true : false"></el-input>
                </el-form-item>
                <el-form-item label="是否显示">
                    <el-radio-group v-model="addMenus.hidden" class="ml-4">
                        <el-radio label="1" size="large">是</el-radio>
                        <el-radio label="2" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="addMenus.sort" type="text"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button>取消</el-button>
                    <el-button @click="add">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { add } from 'lodash';
import { ref, reactive } from 'vue'
import type { Ref } from 'vue'
import { menustreelist } from "../../request/QmsAdminConreiller/index"
import useTable from '../../hooks/useTables'
import Edit from './Edit.vue'
import * as api from '../../request/api'
import { useRoute } from 'vue-router';
const Menus: any = useRoute().query


const addMenusfrom = ref({}) as Ref<menustreelist>
const addMenus = ref({}) as Ref<menustreelist>
if (!Menus.id) {
    addMenus.value = addMenusfrom.value
} else if (Menus) {
    const change = async () => {
        const res = await api.admin.changemenus(Menus.id)
        addMenus.value = res
        console.log(res);
    }
    change()
}
//菜单
// menus()
//上级菜单选项接口
// interface Options {
//     value?: string
//     label?: string
// }
const addoptions: any = ref([
    {
        label: '无上级菜单',
        value: '0'
    },
    {
        label: '权限',
        value: '1'
    },
    {
        label: '商品',
        value: '2'
    },
    {
        label: '订单',
        value: '3'
    },
    {
        label: '营销',
        value: '3'
    },
    {
        label: '126',
        value: '4'
    },
    {
        label: '127',
        value: '5'
    },
    {
        label: '128',
        value: '6'
    },
    {
        label: '123',
        value: '7'
    },
    {
        label: '测试123',
        value: '8'
    },
])

//确认添加
const add = () => {
    // console.log(addMenus);
    // if (!Menus.id) {
    //     console.log('111');
    //     const addmen = async () => {
    //         const res = await api.admin.addmenus(addMenus)
    //         console.log(res)
    //         return res
    //     }
    //     addmen()
    // } else if (Menus.id) {
    //     console.log('222');
    //     const changMenus = async () => {
    //         const res = await api.admin.changmenupdata(addMenus)
    //         console.log(res)
    //         return res
    //     }
    //     changMenus()
    // }

}

let { tableData, getTableData, pagination } = useTable(api.admin.getmenu, {
    // keyword: name.value  // 可以删掉 name.value 不是一个响应式数据
    // name 是响应式的
})



getTableData()

</script>

<style lang="scss" scoped>
.addmenus {
    width: 100%;
    height: 500px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    padding-top: 50px;
    font-size: 18px;

    .el-form-item {
        margin: 30px 0px;

        .el-input {
            height: 40px;
        }
    }
}

.el-dropdown {
    width: 100px;
    height: 30px;
    border: 1px solid #ccc;
}
</style>